<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>跟换背景</title>
		<style>
			.head{
				height: 200px;
				background: rgba(255,255,255,0.5);
				margin: -16px;
			}
			.title{
				width: 1200px;
				margin: 0 auto;
			}
			ul li{
				list-style: none;
			}
			ul li a{
				float: left;
			}
			img{
				width: 200px;
				height: 120px;
			}
			a{
				padding: 30px 10px;
			}
		</style>
	</head>
	<body background="img/1.jpg">
		<div class="head">
			<div class="title">
				<ul>
					<li>
						<a href="#" name="img/1.jpg">
							<img src="img/1.jpg" />
						</a>
					</li>
					<li>
						<a href="#" name="img/2.jpg">
							<img src="img/2.jpg" />
						</a>
					</li>
					<li>
						<a href="#" name="img/3.jpg">
							<img src="img/3.jpg" />
						</a>
					</li>
					<li>
						<a href="#" name="img/4.jpg">
							<img src="img/4.jpg" />
						</a>
					</li>
					<li>
						<a href="#" name="img/5.jpg">
							<img src="img/5.jpg" />
						</a>
					</li>
				</ul>
			</div>
		</div>
	</body>
	<script>
		var a = document.getElementsByTagName("a");
		var body = document.getElementsByTagName("body")[0];
		
		for(var i = 0; i < a.length; i++){
			a[i].onclick = function(){
				body.style.backgroundImage = "url(" + this.name + ")";
			}
		}
	</script>
</html>
